<template>
  <div>
    

    <hr>
    <!-- <HelloWorld msg="Hello Vue3" @sayHello="onSayHello"/> -->
    <!-- <LifeCycle :date="date" v-if="showSon"/> -->
    <!-- <RefVue/> -->
    <!-- <ToRefsVue/> -->
    <!-- <Computed/> -->
    <!-- <HookVue v-if="showSon"/> -->
    <ScriptSetupVue/>
    <hr>

    <p>date:{{date}}</p>
    <button @click="date = new Date().toString()">更新date</button>
    <button @click="showSon = !showSon">子组件显隐</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import LifeCycle from './components/LifeCycle.vue';
import RefVue from './components/Ref.vue';
import ToRefsVue from './components/ToRefs.vue';
import Computed from './components/Computed.vue';
import HookVue from './components/Hook.vue';
import ScriptSetupVue from './components/ScriptSetup.vue';

export default {
  name:"App",

  components:{
    HelloWorld,
    LifeCycle,
    RefVue,
    ToRefsVue,
    Computed,
    HookVue,
    ScriptSetupVue
  },

  data(){
    return {
      date:new Date().toString(),
      showSon:true
    }
  },

  methods:{
    onSayHello(arg){
      console.log("App onSayHello",arg);
    }
  }

}
</script>
